<template lang='pug'>
.addren-ding 
  .header
    p.iconfont.icon-fanhui(@click="$router.go(-1)")
    p.title 用户结算
    p.seek.iconfont.icon-sousuo
  van-notice-bar(left-icon="volume-o", text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。")
  .addDz
    .pal(v-if="!addrenMens" @click="$router.push('/create-add')")
      span 请填写地址
      i.icon-iconfontzhizuobiaozhun19.iconfont
    .addlist(v-else @click="$router.push('/add-list')")
      .top
      .box
        .left
          h3  {{addrenMens.buyer_name}} {{addrenMens.buyer_phone | phoneFilter}}
          span {{addrenMens.buyer_address}} {{addrenMens.area_code}}
        .right
          i.icon-iconfontzhizuobiaozhun19.iconfont
  .Lover
    PayoffList
  .yueFei
    ul
      li
        h3 运费
        span 包邮
      li
        h3 电子普通发票
        span 个人
      li(@click="yhShow=!yhShow")
        h3 优惠卷
        span.icon-xiala.iconfont(:class="{'active':yhShow}")
      .box(v-if="yhShow")
        p 使用优惠码
        .bottom()
          input(placeholder='请输入优惠卷码') 
          button 确定
  .yueFei.okyang
    ul
      li(v-for="d in locList" :key="d.id")
        h3
          img(:src="d.cover")
          p {{d.name}}
        p {{d.num +' × '+ d.price+'.00'}}
  .jxzong
    p 商品价格：{{zongjx[0]+'.00'}}
    p 派送费用：0.00
  .bottomBerfor(style="height:.52rem")
  .bottom-jx
    .left-jx 
      span 共{{zongjx[1]}} 合计
      h3 {{zongjx[0]+'.00'}}
    .right-jx(@click="dingFn") 去付款
</template>
 
<script>
import Vue from "vue";
import { NoticeBar } from "vant";
Vue.use(NoticeBar);
import PayoffList from '../components/PayoffList.vue';
export default {
  name: "vueName",
  data() {
    return {
      addrenMens: [],
      locList: [],
      yhShow: false
    };
  },
  computed:{
    zongjx(){
      let zong=0;
      let num =0;
      this.locList.forEach(item=>{
        zong += item.price * item.num;
        num += item.num;
      })
      return [zong,num]
    }
  },
  filters:{
    phoneFilter(phone){
      if(phone){
        let c = phone.split('').splice(0,3).join('');
        let r = phone.split('').splice(7,11).join('')
        return c+'****'+r
      }
    }
  },
  components:{
    PayoffList
  },
  methods: {
    getAddrenList() {
      this.$http
        .get("http://192.168.43.168:8082/user/sele-addren")
        .then(({ data }) => {
          if(!localStorage.getItem('AddId')){
            this.addrenMens = data[0]
          }else{
            console.log(data)
            this.addrenMens = data.find(item=>item.address_id == localStorage.getItem('AddId'))
          }
        });
    },
    dingFn(){
      if(!this.addrenMens) return alert('请填写地址');
      let obj = {
        aid: this.addrenMens.address_id,
        sid:'',
        num:''
      }
      this.locList.forEach(item=>{
        obj.sid+=item.id+' ';
        obj.num+=item.num+ ' '
      })
      console.log(obj)
      this.$http.get('http://192.168.43.168:8082/user/add-dingd',{
        params:{
          ...obj
        }
      }).then(val=>{
        if(val.status==200){
          this.$router.push('/my-ding/dai-zhi')
        }
      })
      const unfilter = JSON.parse(localStorage.getItem('Lover')).filter(item=>!item.flg)
      console.log(unfilter)
      localStorage.setItem('Lover',JSON.stringify(unfilter))
    }
  },
  created() {
    this.getAddrenList();
    this.$store.commit('setIsShow',false)
    this.locList = JSON.parse(localStorage.getItem('Lover')).filter(item=>item.flg)
    console.log(this.locList)
  },
};
</script>
 
<style scoped lang="sass">
.addren-ding
  width: 100vw
  height: 100vh
  background: #f5f5f5
  margin-top: .5rem
  .jxzong
    padding: .2rem
    background: #fff
  .okyang
    h3 
      display: flex
      p 
        margin-left: .1rem
    img 
      width: .6rem
  .bottom-jx
    width: 100%
    height: .52rem
    background: #ff5722
    position: fixed
    bottom: 0
    display: flex
    .left-jx
      width: 50%
      background: #fff
      display: flex
      align-items: center
      font-size: .18rem
      padding-left: .1rem
      color: #ff5722
      h3:nth-child(2)
        font-weight: bold
        font-size: .2rem
    .right-jx
      width: 50%
      font-size: .16rem
      color: #fff
      font-weight: bold
      line-height: .52rem
      text-align: center
  .header
    width: 100%
    height: .5rem
    display: flex
    justify-content: space-between
    background: #f2f2f2
    text-align: center
    line-height: .5rem
    font-size: .15rem
    padding: 0 .1rem
    color: #000
    position: fixed
    top: 0
    z-index: 9
  .addDz
    padding: .2rem .1rem 
    // height: 1rem
    background: #fff
    margin-top: .1rem
    position: relative
    .pal
      display: flex
      justify-content: space-between
      span 
        color: red
    .addlist
      .top
        background: url('//s1.mi.com/m/images/m/bd1.png')
        width: 100%
        height: .03rem
        position: absolute
        top: 0
        left: 0
      .box
        display: flex
        .left
          width: 90%
          // background: #000
          h3 
            font-size: .18rem
            font-weight: bold
          span
            font-size: .14rem
            color: #757575
        .right
          position: absolute
          right: .1rem
          top: 40%
  .Lover
    padding: .1rem
    background: #fff
    margin-top: .1rem
  .yueFei
    margin-top: .1rem
    background: #fff
    padding: .1rem .2rem
    li
      display: flex
      line-height: .4rem
      border-bottom: 1px solid #ccc
      justify-content: space-between
      span 
        color: #ccc
      h3 
        font-weight: bold
    li:nth-child(3)
      border: none
      .icon-xiala
        transform: rotate(-90deg)
        transition: .5s
        &.active
          transform: rotate(0deg)
    .box
      padding: .2rem
      background: #ddd
      input
        width: 70%
        border: 1px solid #000
        height: .3rem
        margin-top: .1rem
      button 
        padding: 0 .1rem
        height: .3rem
        border: 1px solid #000
        margin-left: .3rem
</style>